<template>
<section class="content-box">
        <div>
        <!--工具条-->
        <el-col class="toolbar">
            <el-col :span="12">
                <h2>增值税税率</h2>
            </el-col>
            <el-col :span="12">
                <el-form :inline="true" :model="filters">
                    <!-- <el-form-item>
                        <el-input v-model="filters.name" placeholder="请输入查询项"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item>
                        <el-button type="primary" class="el-icon-search" v-on:click="handleFilterd"> 查询</el-button>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="success" class="el-icon-plus" @click="handleAdd"> 新建</el-button>
                    </el-form-item>
                    <!-- <label for="file" class="label-file">导入</label> -->
                    <input name="file" id="file" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="update" />
                </el-form>
            </el-col>
        </el-col>
        <!--列表-->
        <el-table :data="tableData" class="indexList" @row-dblclick="handleEdit"  highlight-current-row >
            <el-table-column  prop="AddedValueTax_Code" label="编码" sortable width="100">
            </el-table-column>
            <el-table-column prop="AddedValueTax_Name" label="增值税名" sortable show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="AddedValueTax_Rate" label="增值税数值">
            </el-table-column>
            <!-- <el-table-column prop="AddedValueTax_Remark" label="备注">
            </el-table-column> -->
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <!-- scope.$index 当前列表项index  , row 当前行的所有字段。  -->
                    <el-button-group>
                        <!-- <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button> -->
                        <el-button size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="添加" :visible.sync="addFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="addForm" :label-width="formLabelWidth"  ref="addForm" >
                <el-form-item label="增值税名：">
                    <el-input type="text" v-model="addForm.AddedValueTax_Name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="增值税数值：">
                    <el-input class="num" type="number" @blur="two" v-model="addForm.AddedValueTax_Rate" auto-complete="off"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="addSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <!--编辑界面-->
        <el-dialog title="编辑" :visible.sync="editFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="editForm" :label-width="formLabelWidth" ref="editForm"> 
                <el-form-item label="增值税名：">
                    <el-input v-model="editForm.AddedValueTax_Name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="增值税数值：">
                    <el-input v-model="editForm.AddedValueTax_Rate" auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="方向：">
                    <el-select v-model="editForm.CashFlowItem_BalanceDirection" placeholder="请选择方向">
                        <el-option v-for="item in options" :key="item.Value" :label="item.Key" :value="item.Key"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="editSubmit">确 定</el-button>
            </div>
        </el-dialog>
        </div>
    </section>
</template>
<script>
export default {
  name:'SalesInvoiceInformation',
  data() {
        return {
            tableData: [],//数据列表
            addFormVisible: false, //新增界面是否显示
            editFormVisible: false, //编辑界面是否显示
            formLabelWidth: '120px',//input输入框宽度
            total: 0, //数据总数
            rows: 10, //每页显示多少条
            currentPage: 1,//当前页数
            key:"",//值
            AddedValueTax_Name:'',// 增值税名称
            AddedValueTax_Rate:'', //增值税数值 
            filters: { //查询项
                name: '',
            },
            options: [{
                Value:'1',
                Key:'借方'
            },{
                Value:'2',
                Key:'贷方'
            }],
            //新增界面数据
            addForm: {
                // AddedValueTax_Code:'', //编码
                AddedValueTax_Name:'', // 增值税名称
                AddedValueTax_Rate:'', //增值税数值
                
            },
            //编辑界面数据
            editForm: {
                
                AddedValueTax_Name:'', // 增值税名称
                AddedValueTax_Rate:'', //增值税数值              
                key: ''
            }
        }
    },
    methods:{
        changePage(page) {//当前页数
            this.currentPage = page;
            this.getList();
        },
        update(e){
          let file = e.target.files[0];           
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          axios.post('importCashFlowProject',param,config)
          .then(response=>{
            console.log(response.data);
          })        
        },
        getList:function() { //异步获取客户列表 
          console.log(1111)      
            axios.get("getSalesList",{
                page: this.currentPage,  // 当前页数， 
                rows: this.rows, // 每页多少条
            } ).then(data => {
                console.log(data,'00000');
                /* this.total = data.total; *///总页数
                this.tableData = data.rows; 
            }).catch(err => {
                console.log(err);
            })
        },
        /**
         * 查询项
         */
        handleFilterd() {
            var filterName = {"groupOp":"OR","rules":[{"field":"CashFlowItem_Code","op":"cn","data":this.filters.name},{"field":"CashFlowItem_Name","op":"cn","data":this.filters.name}],"groups":[]};
            axios.post("getCashFlowProjectList",{filter:JSON.stringify(filterName)}).then(data => {
                this.tableData = data.rows;
            }).catch(err => {
                console.log(err);
            })
        },
        handleAdd: function() {//显示新增界面
            this.addForm = {
                // AddedValueTax_Code:'', //编码
                AddedValueTax_Name:'', // 增值税名称
                AddedValueTax_Rate:'', //增值税数值
               
            };
            this.addFormVisible = true;
        },
        two(){
    
            console.log(parseInt(Number(this.addForm.AddedValueTax_Rate)) );
            this.addForm.AddedValueTax_Rate = parseInt(Number(this.addForm.AddedValueTax_Rate));
            // var re = /([0-9]+\.[0-9]{2})[0-9]*/;
            // var v =/^0{1}([.]\d{1,2})?$|^[1-9]\d*([.]{1}[0-9]{1,2})?$/;
            // if(v.test(this.addForm.AddedValueTax_Rate)){alert('Yes')}else{alert('No');}
            
        },
        
        //编辑
        editSubmit: function() {
            this.$refs.editForm.validate((valid) => {
                if(valid) {
                    this.$confirm('确认提交吗？','提示',{}).then(() => {
                        let para = Object.assign( this.editForm);
                        axios.post("editSalesList",para).then((res) => {
                            this.$notify.success({
                                title: '成功',
                                message: `编号`+para.CashFlowItem_Code+`   修改成功！！`,
                                type: 'success',
                                offset: 200,
                                duration: 1800
                            });                  
                            this.$refs['editForm'].resetFields();
							this.editFormVisible = false;
							this.getList();
                        });
                    });
                }
            });
        },
        //新增
        addSubmit: function() { //提交表单
            this.$refs.addForm.validate((valid) => {//验证
                if(valid) {
                    this.$confirm('确认提交吗？','提示',{}).then(() => {
                        let para = Object.assign({}, this.addForm);//拷贝对象进去
                        axios.post("addSalesList",para).then((res) => { //axios
                            console.log(res);
                            this.$notify.success({
                                title: '成功',
                                message:res.Message,
                                type:'success',
                                offset: 200,
                                duration: 1800
                            });
                            this.addFormVisible = false;//关闭窗口
                            this.getList();//重新刷新列表
                            this.$refs['addForm'].resetFields();
                        }).catch(err => {
                             console.log(err);
                        })
                    });
                }
            });
        },
        cs(){
            // console.log(arguments[0]);
            this.key = arguments[0].AddedValueTax_Code,
            this.AddedValueTax_Name = arguments[0].AddedValueTax_Name,
            this.AddedValueTax_Rate = arguments[0].AddedValueTax_Rate
            // console.log(row,'5252');
        },
        handleEdit: function() {//显示编辑界面
            this.editFormVisible = true;
            // this.key = arguments[0].AddedValueTax_Code,
            // this.AddedValueTax_Name = arguments[0].AddedValueTax_Name,
            // this.AddedValueTax_Rate = arguments[0].AddedValueTax_Rate
            
            this.editForm = {
                
                AddedValueTax_Name:arguments[0].AddedValueTax_Name, // 增值税名称
                AddedValueTax_Rate:arguments[0].AddedValueTax_Rate, //增值税数值              
                key: arguments[0].AddedValueTax_Code,
            }
            // this.editForm = Object.assign({},row);
        },
        handleDel: function(key, row) {//删除         
            console.log(key, row);
            this.$confirm('确认删除该信息吗？','提示',{
                type:'warning'
            }).then(() => {
                let para = {
                    // code: row.CashFlowItem_Code,
                    key: row.AddedValueTax_Code
                };
                console.log(para);
                axios.post('deleSalesList',para).then((res) => {
                    //NProgress.done();
                    console.log(res,'删除');
					this.$notify.success({
                        title: '成功',
						message: `编号`+para.code+` 删除成功！！！`,
                        type: 'success',                       
                        offset: 200,
                        duration: 1800
					});
					this.getList();
				});
            }).catch((err) => {
                console.log(err);
            });
        }
    },
    mounted() {
        this.getList();//初始化页面时候就要率先执行获取列表类型接口
    }
}
</script>

<style scoped lang="scss">
@import '../../common/css/index.css';
label.label-file{
    margin:0;
}
</style>
}
</script>
